<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../assets/css/layui.css">
		<link rel="stylesheet" href="../assets/css/view.css" />
		<link rel="icon" href="/favicon.ico">
		<title>管理后台</title>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="../js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="../js/bootstarp-3.3.7/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

		<script>
			$(function() { //, headers: { 'x-requested-with': 'XMLHttpRequest' }
				$.ajaxSetup({
					crossDomain: true,
					xhrFields: {
						withCredentials: true
					}
				});
			});
		</script>

		<script type="text/javascript">
			var th = "";
			$(function() {
				$("#table").bootstrapTable({
					type: "post",
					url: "http://127.0.0.1:8099/ypxxwh/getAllSome",
					pagination: true,
					pageSize: 5,
					queryParams: queryParam,
					columns: [{
						field: 'medicines_id',
						title: '序号',
						align: 'center',

					}, {
						field: 'medicines_name',
						title: '药品名称',
						align: 'center',

					}, {
						field: 'medicines_class',
						title: '药品分类',
						align: 'center',

					}, {
						field: 'conversion',
						title: '数量',
						align: 'center',

					}, {
						field: 'unit',
						title: '单位',
						align: 'center',

					}, {
						field: 'spec',
						title: '规格',
						align: 'center',

					}, {
						field: 'create_time',
						title: '创建日期',
						align: 'center',

					}, {
						field: 'medicines_id',
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							return '<button  class="btn btn-default" onclick="del(' + row.medicines_id + ')">删除</button>'
						}

					}]
				})

				$("#tab1").bootstrapTable({
					type: "post",
					url: "http://127.0.0.1:8099/ypxxwh/getAllMedicines",
					pagination: true,
					pageSize: 5,
					queryParams: queryPar,
					columns: [{
						checkbox: true,
						title: '全选',

					}, {
						field: 'medicines_name',
						title: '药品名称',
						align: 'center',

					}, {
						field: 'medicines_class',
						title: '药品分类',
						align: 'center',

					}, {
						field: 'conversion',
						title: '数量',
						align: 'center',

					}, {
						field: 'unit',
						title: '单位',
						align: 'center',

					}, {
						field: 'spec',
						title: '规格',
						align: 'center',

					}]
				})

				//   			$("#medicines_class").c9hange(function () {
				//   				alert(123);
				//   			})

				//   			$("#medicines_class").onChange(function(){
				////   				alert(111)
				//   				alert($("#medicines_class").val())
				//   				
				//   				
				//   			})

			})

			function del(medicines_id) {
				/*alert(medicines_id);*/
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8099/ypxxwh/upde",
					data: "medicines_id=" + medicines_id,
					success: function(data) {
						$("#tab1").bootstrapTable("refresh");
						$("#table").bootstrapTable("refresh");
					}
				});
			}

			function queryParam() {

				return {
					'medicines_name': $("#medicines_name").val(),
					'medicines_class': $("#medicines_class").val(),
				}
			}

			function queryPar() {

				return {
					'medicines_name': $("#medicines_nam").val(),
					'medicines_class': $("#medicines_clas").val(),
				}
			}

			function selec() {
				/*alert(123);*/
				$("#tab1").bootstrapTable('refresh');

			}

			function sel() {
				/*alert(123);*/
				$("table").bootstrapTable('refresh');

			}

			function tj() {

				/*alert($("#medicines_class").val());*/
				$("table").bootstrapTable('refresh');

			}

			function myModalShow() {
				$("#myModal").modal('show');

			}

			function oncli() {
				th = new Array();
				var getSelectRows = $("#tab1").bootstrapTable('getSelections', function(row) {
					return row;
				});
				for(var i = 0; i < getSelectRows.length; i++) {
					th.push(getSelectRows[i].medicines_id);
				}
				var str = th.join(",");
				/*alert(str);*/
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8099/ypxxwh/updOne",
					data: "str=" + str,
					success: function(data) {
						$("#tab1").bootstrapTable("refresh");
						$("#table").bootstrapTable("refresh");
						$("#myModal").modal('hide');
					}
				});
			}
		</script>
	</head>

	<body class="layui-view-body">
		<div class="layui-content">
			<!-- <div class="layui-page-header">
            <div class="pagewrap">
                <h2 class="title">用户组</h2>
            </div>
        </div>-->
			<div class="layui-row">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="form-box">
							<div class="layui-form layui-form-item">
								<div class="layui-inline">

									<div class="layui-form-mid">药品名称:</div>
									<div class="layui-input-inline" style="width: 100px;">
										<input type="text" id="medicines_name" name="medicines_name" autocomplete="off" class="layui-input" oninput="sel()">
									</div>
									<div class="layui-form-mid">药品分类:</div>
									<div class="layui-input-inline" style="width: 100px;">
										<select id="medicines_class">
											<option value="">-请选择-</option>
											<option value="中草药">中草药</option>
											<option value="中成药">中成药</option>
											<option value="西药">西药</option>
										</select>
									</div>
									<button type="button" onclick="tj()" class="layui-btn layui-btn-blue">提交</button>
									<button type="button" class="layui-btn layui-btn-blue" onclick='myModalShow()'>导入药品信息</button>

								</div>
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>

		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel" style="text-align: center;">导入药品信息</h4>
					</div>
					<div class="modal-body">
						<div class="layui-row">
							<div class="layui-card">
								<div class="layui-card-body">
									<div class="form-box">
										<div class="layui-form layui-form-item">
											<div class="layui-inline">

												<div class="layui-form-mid">药品名称:</div>
												<div class="layui-input-inline" style="width: 100px;">
													<input type="text" id="medicines_nam" name="medicines_name" autocomplete="off" class="layui-input" oninput="selec()">
												</div>
												<div class="layui-form-mid">药品分类:</div>
												<div class="layui-input-inline" style="width: 100px;">
													<select id="medicines_clas">
														<option value="">-请选择-</option>
														<option value="中草药">中草药</option>
														<option value="中成药">中成药</option>
														<option value="西药">西药</option>
													</select>
												</div>
												<button type="button" onclick="tj()" class="layui-btn layui-btn-blue">提交</button>
												<button type="button" onclick="oncli()" class="layui-btn layui-btn-blue">导入</button>

											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
						<table id="tab1"></table>
					</div>
					<div class="modal-footer">
						<!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>-->
					</div>
				</div>
			</div>
		</div>

		<table id="table" border="1px"></table>
		<script src="../assets/layui.all.js"></script>
		<script>
			var element = layui.element;
			var table = layui.table;
			var form = layui.form;
		</script>

	</body>

</html>